<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>第三方充值记录</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
        }

        .showListAll {
            padding: 0 0 0 0.24rem;
        }

        .recored {
            /* width: 100%; */
            /* padding: 0 0.24rem; */
            box-sizing: border-box;
            padding-left: 0.24rem;
        }

        .showListAll ul {
            /* width: 93%; */
            margin: auto;
        }

        .recored li {
            height: 1.6rem;
            background-color: #fff;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            border-bottom: 0.01rem solid #e2e2e2;
        }

        .recored li:first-of-type {
            margin-top: 0;
        }

        .textype {
            background-color: #fabf38;
            margin-right: 0.14rem;
            color: #fff;
            width: 0.36rem;
            height: 0.36rem;
            font-size: 0.24rem;
            line-height: 0.36rem;
            text-align: center;
        }

        .textRe {
            height: 1rem;
            padding: 0 0.24rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        .textRe p {
            width: 50%;
            height: 1rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
        }

        .textRe p:first-of-type span {
            display: inline-block;
            width: 1.67rem;
            font-size: 0.26rem;
            height: 0.94rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 0.06rem solid #ffd203;
        }

        .textRe p:last-of-type span {
            display: inline-block;
            width: 1.67rem;
            font-size: 0.26rem;
            height: 0.94rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            border-bottom: 0.06rem solid #fff;
        }

        .list-item {
            /* height: 0.8rem; */
            display: flex;
            display: -webkit-flex;
            padding-right: 0.24rem;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        .condition {
            display: flex;
            display: -webkit-flex;
            /* justify-content: space-between; */
            align-items: center;
            -webkit-align-items: center;
        }

        .coin-list-detail {
            color: #181818;
            font-weight: 500;
        }

        .coin-list-detail-item {
            color: #999999;
        }

        .list-addres {
            margin-top: 0.2rem;
            display: flex;
            display: -webkit-flex;
            /* height: 0.95rem; */
            padding-right: 0.24rem;
            color: #adadad;
            font-size: 0.24rem;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        #btn-box {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            padding: 0 0.24rem;
            height: 1.2rem;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            box-shadow: #e2e2e2;
        }

        .coinTime {
            font-weight: 0.28rem;
            color: #181818;
            font-weight: 500;
        }

        #btn-box ul {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        #btn-box ul li {
            width: 3.35rem;
            height: 0.85rem;
            color: #181818;
            font-size: 0.3rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            background-color: #ffd203;
        }

        #coinType {
            border: none;
            outline: none;
            background-color: #f8f8f8;
            font-size: 0.28rem;
        }

        .list-detail {
            height: 1.9rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            color: #999999;
        }

        .list-img {
            flex: 1;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            border-top: 0.01rem solid #e5e5e5;
        }

        .list-img img {
            width: 0.6rem;
            height: 0.56rem;
            margin-right: 0.22rem;
        }

        .times {
            height: 0.5rem;
            line-height: 0.5rem;
        }

        .deal-detail {
            flex: 1;
        }

        .deal-detail p:first-of-type {
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
        }

        .deal-detail p {
            color: #999999;
        }

        .style_yes {
            color: #7dc371 !important;
        }

        .style_yes2 {
            color: #ff8e3c !important;
        }

        .style_yes3 {
            color: #ddd !important;
        }


        ul>li {
            box-sizing: border-box;
            padding-right: 0.24rem;

        }
    </style>
</head>

<body>
    <div class="showListAll">
        <ul class="showList" id="ul_list" style="box-sizing: border-box;width: 100%;"></ul>
        <div id="listState" style="text-align: center;margin: auto;color: #666666;margin-top: 0.2rem;"></div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var curPage = 1;
        var totalPage = 0;
        var account = app.getAccount();
        app.headerMap();
        function getOtcRechageList(page, isdown) {
            app.ajax({
                param: {
                    method: "post",
                    url: app.ajaxUrl + "otc/lists",
                    data: {
                        values: {
                            // uid: account.uid,
                            token: account.token,
                            page: page,
                            pageSzie: "20",
                            currency_name: "USDT"
                        }
                    },
                    callback: function (ret, err) {
                        console.log("------------" + JSON.stringify(ret));
                        app.stopRefresh();
                        if (ret.code == 200) {
                            var data = ret.data;
                            var lists = data.lists;
                            totalPage = Math.ceil(Number(data.totalCount) / 20);
                            // 渲染模板
                            var temp = doT.template($("#rechageOtclist").text());
                            app.log("list++++++++++++++++++++", lists);
                            if (isdown) {
                                $("#ul_list").html(temp(lists));
                            } else {
                                $("#ul_list").append(temp(lists));
                            }
                            // 判断是不是第一页且没有数据的特殊情况
                            if (lists.length == 0 && curPage == 1) {
                                $("#listState").text("暂时没有相关数据");
                            }
                            if (curPage == totalPage && totalPage != 0) {
                                $("#listState").text("已经到底了");
                            }
                        }
                    }
                },
                extra: {
                    container: "#ul_list",
                    isflower: false
                }
            });
        }
        getOtcRechageList(curPage, true);
        $("#ul_list").on('click', 'li', function () {
            var thisOrderId = $(this).attr("data-orderId");
            if (!thisOrderId) return
            app.ajax({
                param: {
                    method: "post",
                    url: app.ajaxUrl + "otc/order",
                    data: {
                        values: {
                            token: account.token,
                            id: thisOrderId,
                            pay_channel: "OTC_USDT"
                        }
                    },
                    callback: function (ret, err) {
                        console.log("**********" + JSON.stringify(ret));
                        if (ret.code == 200) {
                            var pageValue = {
                                name: "browser",
                                subpage: "common/browser",
                                title: "在线支付",
                                param: {
                                    pageName: "browser",
                                    url: ret.data
                                }
                            };
                            app.setNavBarAttr(pageValue);
                        }
                    }
                },
                extra: {
                    isflower: true
                }
            });
        });
        app.downRefresh(function () {
            $("#ul_list").empty();
            curPage = 1;
            totalPage = 0;
            getOtcRechageList(curPage, true);
        })
        app.toBottom(function () {
            if (curPage < totalPage) {
                curPage++;
                getOtcRechageList(curPage, false);
            }
        })
    }
</script>
<script id="rechageOtclist" type="text/html">
    {{~it:value:index}}
    <li data-orderId="{{=value.status==0? value.id:""}}"
        style="display: inline-block;height: 1.6rem;width: 100%;padding-top: 0.17rem;border-bottom: 0.01rem solid #e1e1e1;display: flex;display: -webkit-flex;align-items: center;">
        <div style="width: 100%;">
            <p
                style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;color: #181818;font-weight: 500;">
                <span>
                    {{=value.time_create}}
                </span>
                <span>
                    {{=value.amount}}{{=value.currency_name}}
                </span>
            </p>
            <p style=" display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content:
                    space-between;color: #181818;font-size: 0.24rem;margin-top: 0.1rem;">
                <span style="color: #adadad;">
                    OTC充值 | 订单号: {{=value.order_num}}
                </span>
                <span
                    style="display:flex;display:-webkit-flex;align-items:center;color:{{=value.status==0?"#adadad":"#7ED321"}};">
                    {{=value.status==0?"未确认订单":"已支付"}}
                    <img src="../../image/right_jintouax.png" style="width:0.11rem;height:0.22rem;margin-left:0.1rem;display:{{=value.status==0?"block":"none"}}">
                </span>
            </p>
        </div>
    </li>
    {{~}}
</script>

</html>